<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1.1.1.relative</title>
		<style>
			#div01{
				position:absolute;
				left:20px;
				top:40px;
				height:300px;
				width:800px;
				border: solid thin red;
				color : red;
			}
			#div1{
				position:static;
				left:30px;
				top:150px;
				height:100px;
				width:500px;
				border: solid thin blue;
				color : blue;
			}
						
			.div3{
				position:absolute;
				left:20px;
				top:200px;
				height:70px;
				width:400px;
				border: solid 3px green;
				color : green;
				--text-align: right;
			}
            
			.div4{
				position:relative;
				left:500px;
				top:20px;
				height:90px;
				width:500px;
				border: solid 4px green;
				color : black;
			}

		</style>
	</head>
	<body>
		relative、absolute的相对性 <br>
		<div id="div01">
			主框div01, position:absolute;top:40px;height:300px;width:800px;固定不会被撑开。
			<div id="div1">
				div01里的div1,不设position，等于static，对象遵循正常文档流。<br>
				top，right，bottom，left等属性不会被应用。<br>
			</div>
			<div id="div2" style="border:solid thin black">
				div01里的div2,没有样式class(只设了style=border:solid thin black)。<br>
				字体样式继承父元素的样式。
			</div>
			<div id="div3" class="div3">
				div01里的div3, class=div3。position:absolute; <br>
                left:20px;top:200px;<br>
				absolute的left、top是指相对于父元素来说的。
			</div>
			<div id="div4" class="div4">
				div01里的div4, class=div4。position:relative; <br>
                left:500px;top:20px;<br>
                relative的left、top是指相对本元素的文档流起始原点再加的偏移量。
                即在div2下面，不含absolute的div3(div3不是文档流中的元素)。
			</div>

		</div>

	</body>
</html>
